import React, { Component } from 'react'
import './index.scss'
import { Icon } from 'antd'
import $ from 'jquery'
import { Link } from 'react-router-dom'
export default class Home extends Component {
  componentDidMount() {
    $(function() {
      // 水平手风琴效果
      // 1)鼠标移入
      $('.item').on('mouseenter', function() {
        $(this)
          .stop()
          .animate(
            {
              opacity: 1
            },
            100
          )
          .parent()
          .siblings()
          .find('.item')
          .stop()
          .animate(
            {
              opacity: 0.5
            },
            100
          )
        $(this)
          .find('.show')
          .stop()
          .animate(
            {
              width: 400
            },
            500
          )
          .parent('.item')
          .parent()
          .siblings()
          .find('.show')
          .stop()
          .animate(
            {
              width: 0
            },
            500
          )
      })
    })
  }
  clearitem = () => {
    localStorage.setItem('check', '1')
  }
  render() {
    return (
      <div className="home">
        <div className="content">
          <div className="top">
            <div className="top_inner">
              <div className="left">
                <img
                  src={[require('../../assets/home/logo.svg')]}
                  alt="加载失败"
                />
              </div>
              <div className="right">
                <span>开放平台</span>
                <span>企业订餐</span>
                <Link to="/food">
                  <span>
                    <Icon type="mobile" className="phone" />
                    手机端
                  </span>
                </Link>
              </div>
            </div>
          </div>
          <div className="bot">
            <div className="bot_inner">
              <Link to="/peisong" onClick={this.clearitem}>
                <div className="item" data-info="1">
                  <div className="show">
                    <img
                      src="https://cube.elemecdn.com/0/c7/731d222b16d4537c0dcb5dfdc0402svg.svg"
                      alt="蜂鸟配送"
                    />
                    <p>
                      全职收入多劳多得
                      <br />
                      稳定保障风险少
                    </p>
                  </div>
                  <div className="text">
                    <span>蜂鸟配送</span>
                  </div>
                </div>
              </Link>
              <Link to="/distributors">
                <div className="item" data-info="2">
                  <div className="show">
                    <img
                      src="https://cube.elemecdn.com/a/0a/2e70985f1636fdad57a357eb53639svg.svg"
                      alt="代理加盟"
                    />
                    <p>
                      共创合作,领跑市场
                      <br />
                      专业扶持为你保驾护航
                    </p>
                  </div>
                  <div className="text">
                    <span>代理加盟</span>
                  </div>
                </div>
              </Link>
              <Link to="/shop">
                <div className="item" data-info="3">
                  <div className="show">
                    <img
                      src="https://cube.elemecdn.com/0/28/e556e02b60a8a25e1d3d6ef676523svg.svg"
                      alt="商家开店"
                    />
                    <p>
                      多一种开店方式
                      <br />
                      连接千家万户的餐桌
                    </p>
                  </div>
                  <div className="text">
                    <span>商家开店</span>
                  </div>
                </div>
              </Link>
              <Link to="/food">
                <div className="item for" data-info="4">
                  <div className="show last">
                    <img
                      src="https://cube.elemecdn.com/a/3d/28b5752f53afa76c5abf902f78355svg.svg"
                      alt="外卖点餐"
                    />
                    <p>
                      准时必达，超时秒赔
                      <br />
                      每天领取惊喜红包
                    </p>
                  </div>
                  <div className="text">
                    <span>外卖点餐</span>
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
        <footer>
          <div className="foo_inner">
            <div className="left">
              <a
                href="//h5.ele.me/service/agreement/#HEAEDER_SHOW=1"
                target="_blank"
                rel="noopener noreferrer"
              >
                服务条款和协议
              </a>
              <a
                href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other201903051859_43484.html"
                target="_blank"
                rel="noopener noreferrer"
              >
                隐私政策
              </a>
              <a href="/license">营业执照</a>
              <a href="//jobs.ele.me" target="_blank" rel="noopener noreferrer">
                加入我们
              </a>
              <a
                href="//help.ele.me/pc/"
                target="_blank"
                rel="noopener noreferrer"
              >
                在线客服
              </a>
              <a
                href="//dishonesty.rajax-inc.com/"
                target="_blank"
                rel="noopener noreferrer"
              >
                失信人员查询
              </a>
              <a
                href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&amp;entyId=20120305173227823"
                target="_blank"
                rel="noopener noreferrer"
              >
                上海工商行政管理
              </a>
            </div>
            <div className="med">
              <p>互联网药品信息服务资格证书：(沪)-经营性-2016-0011</p>
              <p>增值电信业务许可证：沪B2-20150033 沪ICP备 09007032</p>
              <p>违法和不良信息举报电话：10105757-选消费者-选0</p>
            </div>
            <div className="right">
              <a
                href="http://www.zx110.org/picp/?sn=310100103568"
                target="_blank"
                rel="noopener noreferrer"
              >
                <img
                  src="//cube.elemecdn.com/e/37/3b320a4e7f285d0e088682430080fpng.png"
                  alt="备案"
                />
              </a>
              <a
                href="http://www.shjbzx.cn/"
                target="_blank"
                rel="noopener noreferrer"
              >
                <img
                  src="//cube.elemecdn.com/d/bd/89f16fa4a346910a896efc7c033afpng.png"
                  alt="举报中心"
                />
              </a>
              <a
                href="http://scjgj.sh.gov.cn/platform/survey/step1_phone"
                target="_blank"
                rel="noopener noreferrer"
              >
                <img
                  src="//cube.elemecdn.com/a/dd/8b2e23c97f9874cf0ade465f64f57png.png"
                  alt="订餐大家评"
                  className="thr"
                />
              </a>
              <a
                href="https://newsxmwb.xinmin.cn/special/mljbzsjs/index.html"
                target="_blank"
                rel="noopener noreferrer"
              >
                <img
                  src="//cube.elemecdn.com/2/4c/2457c8ee9047140b7f7dccc942e7dpng.png?x-oss-process=image/resize,h_80,m_fixed"
                  alt="上海网民在行动"
                />
              </a>
            </div>
          </div>
          <p className="hoster">
            Copyright ©2008-2020 上海拉扎斯信息科技有限公司, All Rights
            Reserved.
          </p>
        </footer>
      </div>
    )
  }
}
